<template>
    <div class="mine-body">
        <div class="min-main">
            <div class="first">
                <div class="left">
                    <div class="img">
                        <img src="../../../assets/img/userhead/User07b.svg">
                    </div>
                    <div class="name">{{this.$store.state.Student.realname}}</div>
                </div>
                <div class="right">
                    <div class="year" @click="showYearBlock">
                        <div class="date">{{ now_year }}-{{ now_year+1 }}学年</div>
                        <div class="icon">
                            <div class="triangle-down"></div>
                        </div>
                    </div>
                    <div class="score">{{ yearScore.toFixed(2) }}</div>
                </div>
            </div>
            <div class="choose zc" @click="checkdetail">
                <div>综测明细表</div>
            </div>
            <div class="choose yj" @click="feedback">
                <div>意见反馈</div>
            </div>
            <div class="choose bottom" @click="logout">退出登录</div>
        </div>
        <logoutcompont v-if="islogouting" :imgsrc='logoutimg' imgwidth='171' imgheight='120' title='是否确认退出登录？' content='' @closetip_ensure="closeEnsureAndDoFunction($event)"
                 @closetip_cancel="closeEnsure($event)"></logoutcompont>
        <div class="yearsBolock" v-if="isChoosingYear">
            <div class="year" v-for="(item, index) in yearsList" :key="index" @click="chooseyear(index)">
                <div class="radius" :class="{radius_active: index===now_index}"></div>
                <div class="text" :class="{text_active: index===now_index}">{{item}}-{{item+1}}学年综合评测</div>
            </div>
        </div>
        <detaillist v-if="showdetail" @closeDetail="closeDetail"></detaillist>
    </div>
</template>

<script>
import logoutcompont from '../../../components/public/tip_yesorno'
import logoutimg from '../../../assets/img/pluto-done.svg'
import detaillist from './DetailList'
// 易班api的axios
import studentService from '../../../service/student'
export default {
  components: {
    logoutcompont,
    detaillist
  },
  data () {
    return {
      logoutimg,
      islogouting: false,
      showdetail: false,
      isChoosingYear: false,
      now_index: 0,
      yearsList: [],
      CheckTable: {},
      yearScore: 0
    }
  },
  methods: {

    async getYearsList () {
      let student = this.$store.state.Student
      let result = await studentService.getYearsList(student.studentid)
      return result
    },
    async getCheckTable () {
      let student = this.$store.state.Student
      let result =
        await studentService
          .getCheckTable(student.realname, student.studentid,
            student.collegename, this.yearsList[this.now_index])
      return result
    },
    getyearScore () {
      var score = 0
      if (this.CheckTable == null) {
        return score
      }
      for (var i = 0; i < this.CheckTable.firstList.length; i++) {
        score += this.CheckTable.firstList[i].mark
      }
      for (i = 0; i < this.CheckTable.secondList.length; i++) {
        score += this.CheckTable.secondList[i].mark
      }
      for (i = 0; i < this.CheckTable.thirdList.length; i++) {
        score += this.CheckTable.thirdList[i].mark
      }
      score.toFixed(2)
      console.log(score)
      return score
    },
    async getMineShow () {
      let result = await this.getYearsList()
      this.now_index = 0
      this.yearsList = result
      this.getCheckTable()
        .then(value => this.CheckTable = value)
        .then(() => {
          this.yearScore = this.getyearScore()
        })
    },
    a () {
      alert("fuck")
    },
    logout () {
      this.$store.commit('changeCoverState', true)
      this.islogouting = true
    },
    async closeEnsureAndDoFunction () {
      // 清除本地信息
      this.$store.commit('initUser', null)
      sessionStorage.removeItem('LoginUser')
      this.$router.push({
        name: 'login'
      })
      this.islogouting = false
      this.$store.commit('changeCoverState', false)
    },
    closeEnsure () {
      this.islogouting = false
      this.$store.commit('changeCoverState', false)
    },
    showYearBlock () {
      this.$store.commit('changeCoverState', true)
      this.isChoosingYear = true
    },
    async chooseyear (index) {
      this.now_index = index
      this.getCheckTable()
        // eslint-disable-next-line no-return-assign
        .then(value => this.CheckTable = value)
        .then(() => {
          this.yearScore = this.getyearScore()
        })
      this.isChoosingYear = false
      this.$store.commit('changeCoverState', false)
    },
    feedback () {
      this.$router.push('feedback')
    },
    checkdetail () {
      this.showdetail = true
    },
    closeDetail () {
      this.showdetail = false
    }
  },
  computed: {
    now_year () {
      if (this.yearsList.length > 0) {
        return this.yearsList[this.now_index]
      } else {
        return 0
      }
    }
  },
  mounted () {
    this.getMineShow()
  }
}
</script>

<style lang="scss" scoped>
    .opinion {
        position: fixed;
        z-index: 50;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
    }
    .mine-body {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .min-main {
            flex: 1;
            height:100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            .first {
                width: 100%;
                height: px2rem(125);
                background:linear-gradient(180deg,rgba(2,164,237,1) 0%,rgba(89,194,255,1) 100%);
                display: flex;
                justify-content: space-between;
                .left {
                    width: px2rem(156);
                    height: 100%;
                    // background-color: #fff;
                    display: flex;
                    .img {
                        width: px2rem(50);
                        height: px2rem(50);
                        overflow: hidden;
                        border-radius: 50%;
                        // background-color: #CC0F0F;
                        margin: px2rem(11) px2rem(20);
                        img {
                            width: px2rem(50);
                            height: px2rem(50);
                        }
                    }
                    .name {
                        width:px2rem(88);
                        height:px2rem(30);
                        margin-top: px2rem(26);
                        font-size:px2rem(22);
                        font-family:PingFang SC;
                        font-weight:400;
                        line-height:px2rem(30);
                        color:rgba(255,255,255,1);
                    }
                }
                .right {
                    width: px2rem(112);
                    margin-right: px2rem(37);
                    // background-color: yellow;
                    display: flex;
                    flex-direction: column-reverse;
                    align-items: flex-end;
                    .score {
                        width: px2rem(176);
                        height: px2rem(53);
                        // background-color: #000;
                        font-size:px2rem(44);
                        font-family:SF UI Text;
                        font-weight:bold;
                        text-align: end;
                        line-height:px2rem(53);
                        color:rgba(255,255,255,1);
                    }
                    .year {
                        width: px2rem(116);
                        height: px2rem(24);
                        margin: px2rem(14) 0;
                        background-color: #fff;
                        border-radius: px2rem(6);
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .date {
                            margin-left: px2rem(5);
                            height: 100%;
                            width: px2rem(94);
                            font-size:px2rem(12);
                            font-family:PingFang SC;
                            font-weight:400;
                            line-height:px2rem(24);
                            color:rgba(2,164,237,1);
                            white-space: nowrap;
                            overflow: auto;
                        }
                        .icon {
                            width: 0;
                            height: 0;
                            border-left: px2rem(7) solid transparent;
                            border-right: px2rem(7) solid transparent;
                            border-bottom: 0;
                            border-top: px2rem(7) solid rgba(2,164,237,1);
                            margin: 0 px2rem(5);
                            margin-left: 0;

                        }
                    }
                }
            }
            .choose {
                width: 100%;
                height: px2rem(54);
                background-color: #fff;
                margin-bottom: px2rem(8);
                font-family: PingFang SC;
                font-size: px2rem(18);
                font-weight: 400;
                line-height: px2rem(54);
                display: flex;
                div {
                    width: px2rem(90);
                    height: px2rem(54);
                    padding-left: 20%;
                }
            }
            .zc {
                    background: url('../../../assets/img/icon/personal_document@2x.png') no-repeat 100% 100% white;
                    background-size: 100% 100%;
            }
            .yj {
                    background: url('../../../assets/img/icon/personal_advice@2x.png') no-repeat 100% 100% white;
                    background-size: 100% 100%;
            }
            .bottom {
                justify-content: center;
                color: #CC0F0F;
            }
        }
        .yearsBolock {
            position: absolute;
            z-index: 200;
            width: px2rem(258);
            height: px2rem(192);
            border-radius: px2rem(31);
            background-color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: auto;
            .year {
            width: px2rem(200);
            height: px2rem(22);
            margin-top: px2rem(7);
            margin-bottom: px2rem(7);
            display: flex;
            justify-content: space-between;
            // background-color: black;
            .radius {
                width: px2rem(18);
                height: px2rem(18);
                border: px2rem(2) solid rgba(188,191,196,1);
                border-radius:50%;
            }
            .radius_active{
                width: px2rem(10);
                height: px2rem(10);
                border: px2rem(6) solid rgba(2,164,237,1);
            }
            .text {
                width: px2rem(160);
                height: px2rem(20);
                font-size:px2rem(14);
                font-family:PingFang SC;
                font-weight:400;
                line-height:px2rem(20);
                color:rgba(188,191,196,1);
            }
            .text_active {
                color:rgba(2,164,237,1);
            }
            }
        }
    }
</style>
